<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>下单信息</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	
<div id="doumee">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">下单信息</h4>
	</header>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="menuDtl">
					
					<ol class="dtl-headMod bg-w">
						<!--<li class="bg"></li>-->
						<li class="info">
							<h5 class="t1">{{menuObj.name}}&nbsp;&nbsp;{{menuObj.phone}}</h5>
							<h5 class="t2">客户地址：{{menuObj.addr}}</h5>
							<h5 class="t2">订单产品：{{brand[menuObj.brand]}}</h5>
						</li>
					</ol>
					
					<div class="menuDtlMod">
						<ul class="box" v-for="(obj,index) in menuObj.order">
							<li class="info">
								<div class="statu">
									<span class="color-1" v-if="obj.type == 0">意向</span><!--意向(待办\客户)-->
									<span class="color-2" v-if="obj.type == 1">预订</span><!--预订（待办、客户、他人跟进）-->
									<span class="color-3" v-if="obj.type == 2">意向</span><!--意向（初测）（待办、客户、他人跟进）-->
									<span class="color-3" v-if="obj.type == 3">预订</span><!--预订（初测）（客户、他人跟进）-->
									<span class="color-4" v-if="obj.type == 4">预订</span><!--预订（复测）（他人跟进、客户）-->
									<span class="color-5" v-if="obj.type == 5">已签单</span><!--已签单（客户）-->
									<span class="color-6" v-if="obj.type == 6">已下单</span><!--已下单（客户）-->
									<span class="color-7" v-if="obj.type == 7">已安装</span><!--已安装（客户）-->
									<span class="color-8" v-if="obj.type == 8">新客户</span><!--新客户（待办）-->
									<span class="color-9" v-if="obj.type == 9">待下单</span><!--待下单（待办）-->
									<span class="color-10" v-if="obj.type == 10">待签单</span><!--待签单（待办）-->
									<span class="color-11" v-if="obj.type == 11">初测预约</span><!--初测预约（待办、我的测量）-->
									<span class="color-12" v-if="obj.type == 12">初测预约确认</span><!--初测预约确认（待办、我的测量）-->
									<span class="color-13" v-if="obj.type == 13">初测确认</span><!--初测确认（待办、我的测量）-->
									<span class="color-14" v-if="obj.type == 14">复测预约</span><!--复测预约（待办、我的测量）-->
									<span class="color-15" v-if="obj.type == 15">复测确认</span><!--复测确认（待办、我的测量）-->
									<span class="color-16" v-if="obj.type == 16">复测预约确认</span><!--复测预约确认（待办、我的测量）-->
									<span class="color-17" v-if="obj.type == 17">派单</span><!--派单-->
									<span class="color-18" v-if="obj.type == 18">业务员待分配</span><!--派业务员待分配-->
									<span class="color-19" v-if="obj.type == 19">已生产</span><!--已生产-->
									<span class="color-20" v-if="obj.type == 20">已发货</span><!--已发货-->
									<span class="color-21" v-if="obj.type == 21">已受理</span><!--已受理-->
									<span class="color-22" v-if="obj.type == 22">已包装</span><!--已包装-->
									<span class="color-23" v-if="obj.type == 23">售后已受理</span><!--售后已受理-->
									<span class="color-24" v-if="obj.type == 24">已排单</span><!--已排单-->
									<span class="color-25" v-if="obj.type == 25">已完工</span><!--已完工-->
									<span class="color-26" v-if="obj.type == 26">已回访</span><!--已回访-->
								</div>
								<h5><span class="name">订单编号：</span>{{obj.orderId}}</h5>
								<h5><span class="name">下单时间：</span>{{obj.time}}</h5>
								<h5><span class="name">设计师：</span>{{obj.des}}</h5>
								<h5><span class="name">工厂交货日期：</span>{{obj.end == null ? '--' : obj.end}}</h5>
								<h5>订单总价：￥{{obj.total}}</h5>
							</li>
							<li class="subMod">
								<div class="sub" v-for="item in obj.sub">
									<ol class="sub-box flex-row flex-top">
										<li class="flex-full sub-info">
											<h5 class="dm-clearfix">{{item.subId}}
												<span class="dm-right">{{item.product}}</span>
											</h5>
											<h5 class="dm-clearfix">￥{{item.val}}
												<div class="dm-right">
													<span class="color-1" v-if="obj.type == 0">意向</span><!--意向(待办\客户)-->
													<span class="color-2" v-if="obj.type == 1">预订</span><!--预订（待办、客户、他人跟进）-->
													<span class="color-3" v-if="obj.type == 2">意向</span><!--意向（初测）（待办、客户、他人跟进）-->
													<span class="color-3" v-if="obj.type == 3">预订</span><!--预订（初测）（客户、他人跟进）-->
													<span class="color-4" v-if="obj.type == 4">预订</span><!--预订（复测）（他人跟进、客户）-->
													<span class="color-5" v-if="obj.type == 5">已签单</span><!--已签单（客户）-->
													<span class="color-6" v-if="obj.type == 6">已下单</span><!--已下单（客户）-->
													<span class="color-7" v-if="obj.type == 7">已安装</span><!--已安装（客户）-->
													<span class="color-8" v-if="obj.type == 8">新客户</span><!--新客户（待办）-->
													<span class="color-9" v-if="obj.type == 9">待下单</span><!--待下单（待办）-->
													<span class="color-10" v-if="obj.type == 10">待签单</span><!--待签单（待办）-->
													<span class="color-11" v-if="obj.type == 11">初测预约</span><!--初测预约（待办、我的测量）-->
													<span class="color-12" v-if="obj.type == 12">初测预约确认</span><!--初测预约确认（待办、我的测量）-->
													<span class="color-13" v-if="obj.type == 13">初测确认</span><!--初测确认（待办、我的测量）-->
													<span class="color-14" v-if="obj.type == 14">复测预约</span><!--复测预约（待办、我的测量）-->
													<span class="color-15" v-if="obj.type == 15">复测确认</span><!--复测确认（待办、我的测量）-->
													<span class="color-16" v-if="obj.type == 16">复测预约确认</span><!--复测预约确认（待办、我的测量）-->
													<span class="color-17" v-if="obj.type == 17">派单</span><!--派单-->
													<span class="color-18" v-if="obj.type == 18">业务员待分配</span><!--派业务员待分配-->
													<span class="color-19" v-if="obj.type == 19">已生产</span><!--已生产-->
													<span class="color-20" v-if="obj.type == 20">已发货</span><!--已发货-->
													<span class="color-21" v-if="obj.type == 21">已受理</span><!--已受理-->
													<span class="color-22" v-if="obj.type == 22">已包装</span><!--已包装-->
													<span class="color-23" v-if="obj.type == 23">售后已受理</span><!--售后已受理-->
													<span class="color-24" v-if="obj.type == 24">已排单</span><!--已排单-->
													<span class="color-25" v-if="obj.type == 25">已完工</span><!--已完工-->
													<span class="color-26" v-if="obj.type == 26">已回访</span><!--已回访-->
												</div>
											</h5>
										</li>
										<li @click="showSub" class="btn animate"></li>
									</ol>
									<div class="progressMod h5">
										<ol class="list flex-row ing">
											<li class="sign flex-row">
												<span class="dot"></span>
												<span class="icon"><img src="image/menu/icon_wc.png" /></span>
											</li>
											<li class="name flex-full">完成</li>
											<li class="time"></li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已回访</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">完工</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">排单</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">受理</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row ing">
											<li class="sign flex-row">
												<span class="dot"></span>
												<span class="icon"><img src="image/menu/icon_az.png" /></span>
											</li>
											<li class="name flex-full">安装</li>
											<li class="time"></li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已发货</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已包装</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">生产中</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已受理</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row ing">
											<li class="sign flex-row">
												<span class="dot"></span>
												<span class="icon"><img src="image/menu/produce-icon.png" /></span>
											</li>
											<li class="name flex-full">生产进度</li>
											<li class="time"></li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已下单</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已签单</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">出方案</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">派测量</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已预订</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已进店</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row">
											<li class="sign flex-row">
												<span class="dot"></span>
											</li>
											<li class="name flex-full">已联系</li>
											<li class="time">2018-10-10</li>
										</ol>
										<ol class="list flex-row ing">
											<li class="sign flex-row">
												<span class="dot"></span>
												<span class="icon"><img src="image/menu/icon_fwjd.png" /></span>
											</li>
											<li class="name flex-full">服务进度</li>
											<li class="time"></li>
										</ol>
									</div>
								</div>
							</li>
						</ul>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
	
</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#doumee",
	data:{
		menuObj:{
			id:101,
			name:'张三',
			phone:'18756194512',
			addr:'和塘路小区1栋1单元202室',
			brand:1,
			order:[
				{orderId:'20181010Z03',time:'2018.10.18',des:'金伟斌13857607182',end:null,total:'10000.00',type:21,sub:[
					{subId:'20181010Z03-1',product:'主卧 衣柜',val:'5000.00',caseDate:'2018-10-10',signDate:'2018-10-20',placeDate:'2018-11-08',produceDate:null,acceptDate:'2018-11-10'},
					{subId:'20181010Z03-2',product:'主卧 衣柜',val:'5000.00',caseDate:'2018-10-10',signDate:'2018-10-20',placeDate:'2018-11-08',produceDate:null,acceptDate:'2018-11-10'}
				]}/*,{orderId:'20181010Z04',time:'2018.10.18',des:'金伟斌13857607182',end:null,total:'10000.00',type:21,sub:[
					{subId:'20181010Z04-1',product:'主卧 衣柜',val:'5000.00',caseDate:'2018-10-10',signDate:'2018-10-20',placeDate:'2018-11-08',produceDate:null,acceptDate:'2018-11-10'},
					{subId:'20181010Z04-2',product:'主卧 衣柜',val:'5000.00',caseDate:'2018-10-10',signDate:'2018-10-20',placeDate:'2018-11-08',produceDate:null,acceptDate:'2018-11-10'}
				]}*/
			]
		},
		brand:['志邦橱柜','法兰菲全屋','志邦木门'],
	},
	methods:{
		//收放详情
		showSub:function(e){
			var that = this;
			var target = $(e.currentTarget);
			var height =  that.swiper.height;
			
			if(target.hasClass('clk')){
				target.removeClass('clk');
				target.parent().next().slideUp(function(){
					var news = $("#menuDtl").height();
					if(news <= height){
						that.swiper.setWrapperTranslate(0);
					}
				});
			}else{
				target.addClass('clk');
				target.parent().next().slideDown();
				this.now = $("#menuDtl").height();
			};
			
			var translate = that.swiper.getWrapperTranslate();
			if(this.now + translate < height){
				that.swiper.setWrapperTransition(500);
				if(height - this.now >= 0){
					that.swiper.setWrapperTranslate(0);
				}else{
					that.swiper.setWrapperTranslate(height - this.now);
				};
			};
		},
	},
	mounted:function(){
		var that = this;
		this.swiper = pullSwiper('#Main');
	}
});

</script>

</body>
</html>
